<template>
  <div class="linkComp">
    <div class="header">
      <div class="back" @click="handleBack">
        <el-icon><ArrowLeft /></el-icon>&nbsp;
        <span>返回</span>
      </div>
      <div>
        <CommonBtn style="width: 100px" :dashboard="activeTab !== 0" @click="handleMark(0)">标记单词试题</CommonBtn
        >&nbsp;&nbsp;&nbsp;
        <CommonBtn style="width: 100px" :dashboard="activeTab !== 1" @click="handleMark(1)">包含单词试题</CommonBtn>
      </div>
    </div>
    <div class="container">
      <div class="content" v-for="item in wordsList" :key="item.id">
        <div class="title">标记于本题:</div>
        <div class="desc" v-html="item.title"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import CommonBtn from "@/components/CommonBtn";
import { clientWordsQuestion, clientWordsQuestionList } from "@/service/personalCenter";
const props = defineProps({
  currentWordsItem: {
    type: Object,
    default: {},
  },
});
const emits = defineEmits(["back"]);
const handleBack = () => {
  emits("back");
};

const wordsList = ref([]);
const loading = ref(false);
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);

const activeTab = ref(0);

const getWordsLit = async () => {
  console.log(props.currentWordsItem.wordsid)
  loading.value = true;
  let params = {
    page: page.value,
    rows: pageSize.value,
  }

  if(activeTab.value === 0) {
    params.wordsid = props.currentWordsItem.wordsid;
    const resp = await clientWordsQuestion(params);
    if(resp.code === '000000') {
      wordsList.value = resp.data.result;
      total.value = resp.data.total;
    }
  } else {
    params.subject = 0;
    params.title = props.currentWordsItem.title;
    const resp = await clientWordsQuestionList(params);
    if(resp.code === '000000') {
      wordsList.value = resp.data.result;
      total.value = resp.data.total;
    }
  }
  loading.value = false;
}

const handleMark = (tab) => {
  activeTab.value = tab;
  getWordsLit();
}

onMounted(() => {
  getWordsLit();
})
</script>
<style scoped lang="scss">
.linkComp {
  .header {
    display: flex;
    align-items: center;
    margin-top: 10px;
    .back {
      display: flex;
      align-items: center;
      user-select: none;
      cursor: pointer;
      min-width: 60px;
      margin: 3px;
      color: var(--main-color);
      font-weight: bold;
      margin-left: 10px;
      > span {
        font-size: 12px;
      }
      &:hover {
        opacity: 0.5;
      }
    }
  }
  .container {
    // height: 100px;
    margin: 10px;
    padding: 10px;
    .content {
      display: flex;
      width: 100%;
      border-bottom: 1px solid #f4f4f4;
      margin-bottom: 10px;
      padding-bottom: 10px;
      .title {
        min-width: 90px;
        font-weight: 600;
        margin-right: 10px;
        font-size: 14px;
      }
      .desc {
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
        width: 100%;
        flex: 1;
        box-sizing: border-box;
        font-size: var(--default13px);
        color: var(--otherFontColor);
      }
    }
  }
}
</style>
